<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j addr-pop-con component-add-or-edit-invoice">
    <!-- 弹窗 -->
    <div class="popup-mask" />
    <div class="fix-transform-blur">
      <div
        class="popup-box"
        style="width: 610px"
      >
        <!-- 新增地址 -->
        <div class="tit">
          <div class="text">
            {{ $t('invoice.invoiceInfo') }}
          </div>
          <div
            class="close"
            @click="hidePop"
          />
        </div>
        <div class="con invoice-con">
          <div class="edit">
            <div class="item error">
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.invoiceType') }}：
              </div>
              <div class="button-box">
                <div
                  class="button-box-item"
                  :class="{ active: dataFrom.invoiceType === 1 }"
                  @click="selectInvoiceType(1)"
                >
                  <div class="text">
                    {{ $t('invoice.generalInvoice') }}
                  </div>
                </div>
                <div
                  v-if="!orderInvoiceId"
                  class="button-box-item"
                  :class="{ active: dataFrom.invoiceType === 2 }"
                  @click="selectInvoiceType(2)"
                >
                  <div class="text">
                    {{ $t('invoice.noInvoice') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="dataFrom.invoiceType === 1"
              class="item"
            >
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.invoiceTitle') }}：
              </div>
              <div class="button-box">
                <div
                  class="button-box-item"
                  :class="{ active: dataFrom.headerType === 2 }"
                  @click="selectheaderType(2)"
                >
                  <div class="text">
                    {{ $t('invoice.personal') }}
                  </div>
                </div>
                <div
                  class="button-box-item"
                  :class="{ active: dataFrom.headerType === 1 }"
                  @click="selectheaderType(1)"
                >
                  <div class="text">
                    {{ $t('invoice.unit') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="dataFrom.headerType === 2 && dataFrom.invoiceType === 1"
              class="item"
            >
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.personalName') }}：
              </div>
              <div class="button-box text-box">
                <input
                  v-model="dataFrom.headerName"
                  maxlength="11"
                  :placeholder="$t('invoice.inputTips1')"
                  type="text"
                  class="input"
                >
                <div
                  v-if="errTip===1"
                  class="error-text"
                >
                  {{ $t('inputAllSpace') }}
                </div>
              </div>
            </div>
            <div
              v-if="dataFrom.headerType === 1 && dataFrom.invoiceType === 1"
              class="item"
            >
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                <span style="color: red">*</span>
                {{ $t('invoice.unitName') }}：
              </div>
              <div class="button-box text-box">
                <input
                  v-model="dataFrom.headerName"
                  maxlength="50"
                  :placeholder="$t('invoice.inputTips2')"
                  type="text"
                  class="input"
                >
                <div
                  v-if="errTip === 1"
                  class="error-text"
                >
                  {{ $t('invoice.inputTips2') }}
                </div>
              </div>
            </div>
            <div
              v-if="dataFrom.headerType === 1 && dataFrom.invoiceType === 1"
              class="item"
            >
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                <span style="color: red">*</span>
                {{ $t('invoice.TaxpayerIDNumber') }}：
              </div>
              <div class="button-box text-box">
                <input
                  v-model="dataFrom.invoiceTaxNumber"
                  maxlength="20"
                  :placeholder="$t('invoice.inputTips3')"
                  type="text"
                  class="input"
                >
                <div
                  v-if="errTip === 2"
                  class="error-text"
                >
                  {{ $t('invoice.inputTips3') }}
                </div>
                <div
                  v-if="errTip === 5"
                  class="error-text"
                >
                  {{ $t('invoice.inputTips4') }}
                </div>
              </div>
            </div>
            <div
              v-if="dataFrom.invoiceType === 1"
              class="item"
            >
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.invoiceContent') }}：
              </div>
              <div class="button-box">
                <div
                  class="button-box-item"
                  :class="{ active: dataFrom.invoiceContext === 1 }"
                >
                  <div class="text">
                    {{ $t('invoice.productDetails') }}
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.invoiceInstructions') }}：
              </div>
              <div class="description-box">
                <div>1、{{ $t('invoice.invoiceTips1') }}</div>
                <div>2、{{ $t('invoice.invoiceTips2') }}</div>
                <div>3、{{ $t('invoice.invoiceTips3') }}</div>
                <div>4、{{ $t('invoice.invoiceTips4') }}</div>
              </div>
            </div>
            <div class="item item-btn">
              <div class="label-btn">
&nbsp;
              </div>
              <a
                href="javascript:void(0)"
                class="btn-r"
                @click="submitDataForm"
              >{{ $t('invoice.saveInvoiceInformation') }}</a>
              <a
                href="javascript:void(0)"
                class="btn-close"
                @click="hidePop"
              >{{
                $t('cancel')
              }}</a>
            </div>
          </div>
        </div>
        <!-- /新增地址 -->
      </div>
    </div>
    <!-- /弹窗 -->
  </div>
</template>

<script setup>

import { ElMessage } from 'element-plus'

const emit = defineEmits(['hidePop', 'getInvoiceData', 'updateData', 'updateData'])

const dataFrom = reactive({
  invoiceType: 1, // 发票类型 1、普通电子发票 2、不开具发票
  headerType: 2, // 抬头类型 2、个人 1、企业
  invoiceContext: 1,
  headerName: '',
  invoiceTaxNumber: ''
})

const type = ref(0)
const shopId = ref('')
const orderNumber = ref('')
const orderInvoiceId = ref(null)
const init = (typePar, data, orderNumberPar, shopIdPar, orderInvoiceIdPar) => {
  type.value = typePar
  shopId.value = shopIdPar || ''
  orderNumber.value = orderNumberPar || ''
  orderInvoiceId.value = orderInvoiceIdPar || null
  if (orderInvoiceId.value) {
    dataFrom.invoiceType = 1
  }
  if (data) {
    const obj = JSON.parse(JSON.stringify(data))
    dataFrom.invoiceType = obj.invoiceType
    dataFrom.headerType = obj.headerType
    dataFrom.invoiceContext = obj.invoiceContext
    dataFrom.headerName = obj.headerName
    dataFrom.invoiceTaxNumber = obj.invoiceTaxNumber
  }
}

/**
 * 隐藏新增地址弹窗
 */
const hidePop = () => {
  emit('hidePop', false)
}

const selectInvoiceType = (type) => {
  dataFrom.invoiceType = type
  dataFrom.headerType = 2
}

// 错误提示: 1-收件人 2-手机号 3-地区数据 4-详细地址 5-纳税人识别号
const errTip = ref(0)
const selectheaderType = (headerType) => {
  errTip.value = -1
  dataFrom.headerType = headerType
}

const TaxNumberReg = /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{17})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/
const submitDataForm = () => {
  if (dataFrom.invoiceType === 1 && dataFrom.headerType === 2 && dataFrom.headerName && !dataFrom.headerName.trim()) {
    errTip.value = 1
    return
  }
  if (dataFrom.headerType === 1) {
    if (!dataFrom.headerName || !dataFrom.headerName.trim()) {
      errTip.value = 1
      return
    }
    if (
      !dataFrom.invoiceTaxNumber ||
      !dataFrom.invoiceTaxNumber.trim()
    ) {
      errTip.value = 2
      return
    }
    if (!TaxNumberReg.test(dataFrom.invoiceTaxNumber)) {
      errTip.value = 5
      return
    }
  }
  if (!type.value) {
    if (shopId.value) {
      dataFrom.shopId = shopId.value
    }
    emit('getInvoiceData', dataFrom)
  } else {
    const orderInvoiceDTO = {
      headerName: dataFrom.headerName,
      headerType: dataFrom.headerType,
      invoiceContext: dataFrom.invoiceContext,
      invoiceTaxNumber: dataFrom.invoiceTaxNumber,
      invoiceType: dataFrom.invoiceType,
      shopId: shopId.value,
      orderNumber: orderNumber.value,
      orderInvoiceId: orderInvoiceId.value
    }
    if (dataFrom.headerType === 2) {
      delete orderInvoiceDTO.invoiceTaxNumber
    }
    if (dataFrom.invoiceType === 2) {
      hidePop()
    } else if (orderInvoiceId.value) {
      http
        .put('/p/orderInvoice', orderInvoiceDTO)
        .then(() => {
          ElMessage({
            message: $t('applyReturn.modifiedSuccessfully'),
            type: 'success',
            duration: 1000,
            onClose: () => {
              emit('updateData', false)
            }
          })
        })
    } else {
      http.post('/p/orderInvoice', orderInvoiceDTO)
        .then(() => {
          ElMessage({
            message: $t('invoice.successTip'),
            type: 'success',
            duration: 1000,
            onClose: () => {
              emit('updateData', false)
            }
          })
        })
    }
  }
}

defineExpose({
  init
})

</script>

<style lang="scss" scoped>
@use "index";
</style>
